<template>
	<view style="height: 100vh;background-color: #fff;">
		<view class="nativetop" v-if="array.length>0">
			<view class="nativetop_1">
				<view class="iconfont iconsousuo"></view> <input class="inputs" v-model="kyesee" type="text" @input="fpNumInputB"
					placeholder="搜索四会市/四会/四" /><view v-if="kyesee"  @click="clears()" class="iconfont iconevert_delete"></view>
			</view>
		</view>
		<view style="height: calc(100vh - 90upx);box-sizing: border-box;overflow: hidden;" v-if="array.length>0">
			<view class="sitebox1">
				<scroll-view class="sitebox1x" scroll-y="true" :scroll-into-view="clickId" scroll-with-animation
					@scroll="productScroll">
					<view class="sites" v-if="arrayA.length>0">
						<view class="sites_1" @click="primary(item.name)" v-for="(item,index) in arrayA" :key="index">
							{{item.name}}
						</view>
					</view>
					<view class="sitebox1x_t" v-for="(item,index) in itemArr" :key="index">
						<view class="sitebox1x_tx" :id="'po' + index">
							{{item.key}}
						</view>
						<view class="sitebox1x_ty">
							<view class="sitebox1x_tyy" v-for="(items,indexs) in item.data" :key="indexs"
								@click="primary(items)">
								{{items}}
							</view>
						</view>
					</view>
					<view class="" style="height: 60upx;"  v-if="itemArr.length>0">
						
					</view>
				</scroll-view>
				<view class="sitebox1y">
					<view class="sitebox1y_t" v-for="(item,index) in indexList" :key="index"
						@click="handleCateClick(index)" :class="index==indexyse?'atives':''">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="NoData" v-if="array.length==0">
			<view class="NoDataA">
				<image class="NoData_images" src="@/static/imge/zanwu.svg"></image>
			</view>
			<view class="NoData_texte1">
				亲，当前暂无站点信息
			</view>
			<view class="NoData_texte2">可以先看看别的哦～</view>
		</view>
	</view>
</template>

<script>
	import PinyinUtils from './pingyinUtils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				indexList: [],
				itemArr: [],
				title: '',
				indexAys: '',
				clickId: "",
				indexyse: 0,
				rightHeightList: [],
				array: [],
				arrayA: [],
				kyesee:''
			}
		},
		onLoad(option) {
			this.title = option.id == 1 ? '出发地' : '目的地'
			this.indexAys = option.id
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.findList(this.indexAys)
		},
		methods: {
			...mapMutations(['getData']),
			clears(){
				this.kyesee = ''
				this.arrayA = []
			},
			fpNumInputB(e) {
				console.log(e.detail.value)
				if (e.detail.value) {
					this.arrayA = this.array.filter(item => item.name.includes(e.detail.value));
					console.log(this.arrayA)
				}
			},
			getHeightList() {
				let that = this;
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery
					.selectAll(".sitebox1x_t")
					.boundingClientRect(function(rects) {
						let arr = [0];
						let top = 0;
						rects.forEach(function(rect) {
							top += rect.height + 10;
							arr.push(top);
						});
						that.rightHeightList = arr; //主要是它
					})
					.exec();
			},
			handleCateClick(index) {
				this.clickId = "po" + index;
				this.indexyse = index
			},
			productScroll(e) {
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.indexList.length; i++) {
					let h1 = this.rightHeightList[i];
					let h2 = this.rightHeightList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.indexyse = i;
						this.clickIdA = "por" + i;
					}
				}
			},
			findList(e) {
				var that = this
				let objP = {
					type: e
				}
				const obj = {
					url: 'ddStation/findList',
					data: objP,
					success(res) {
						that.array = res.datas.list
						var data = res.datas.list
						for (var i = 0; i < data.length; i++) {
							var key = PinyinUtils.chineseToPinYin(data[i].name)
							data[i].key = key.charAt(0);
						}
						that.itemArr = that.abilitySort(data, 'key')

						function SortArray(x, y) {
							return x.key.localeCompare(y.key);
						}
						that.itemArr = that.itemArr.sort(SortArray)
						that.indexList = that.itemArr.map((item) => item.key);
						that.indexList.sort((a, b) => a.localeCompare(b));
						setTimeout(() => {
							that.getHeightList();
						}, 1000);
					},
					fail(res) {

					},
					complete(res) {}
				}
				that.getData(obj)
			},

			abilitySort(arr, property) {
				let map = {};
				for (let i = 0; i < arr.length; i++) {
					const ai = arr[i];
					if (!map[ai[property]]) map[ai[property]] = [
						ai.name
					];
					else map[ai[property]].push(ai.name);
				}
				let res = [];
				Object.keys(map).forEach((key) => {
					res.push({
						[property]: key,
						data: map[key]
					});
				});
				return res;
			},
			primary(e) {
				var that = this
				uni.navigateBack({
					success: () => {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 1]; //上一个页面
						if (that.indexAys == 1) {
							prevPage.$vm.starpion = e
						} else {
							prevPage.$vm.endpion = e
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sites {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding-top: 20upx;
		.sites_1 {
			background-color: #f7f7f7;
			padding: 16upx 25upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
			font-size: 28upx;
			color: #333;
			border-radius: 8upx;
		}
	}

	.nativetop {
		display: flex;
		height: 90upx;
		align-items: center;
		font-size: 24upx;
		padding: 0 30upx;

		.nativetop_1 {
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #f7f7f7;
			border-radius: 12upx;

			.iconsousuo {
				padding: 0 5upx;
				padding-left: 25upx;
				font-size: 36upx;
			}

			.inputs {
				width: 100%;
				padding: 0 20upx;
				border-radius: 12upx;
				font-size: 30upx;
				height: 80upx;
			}
			.iconevert_delete{
				padding: 20upx;
				font-size: 36upx;
			}
		}

	}

	.sitebox1 {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 100%;

		.sitebox1x {
			height: 100%;
			flex: 1;
			padding-left: 30upx;
			box-sizing: border-box;
			.sitebox1x_t {
				.sitebox1x_tx {
					color: #333;
					height: 80upx;
					font-weight: 500;
					font-size: 30upx;
					display: flex;
					align-items: center;
				}

				.sitebox1x_ty {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.sitebox1x_tyy {
						background-color: #f7f7f7;
						padding: 16upx 25upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
						font-size: 28upx;
						color: #333;
						border-radius: 8upx;
					}
				}
			}

		}

		.sitebox1y {
			height: 100%;
			background-color: #fff;
			z-index: 100;
			flex: none;
			width: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.sitebox1y_t {
				width: 50upx;
				height: 50upx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				font-size: 30upx;
				margin-bottom: 10upx;
			}

			.atives {
				background-color: #3478F6;
				color: #fff;
			}

		}
	}
</style>